﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UCAppoint.ascx.cs" Inherits="Control_Appointment_UCAppoint" %>
<style>
    #content
    {
        text-align: center;
        width: 768px;
        height: 791px;
        max-height: 791px;
    }
    #calendar
    {
        text-align: left;
    }
    .jsbank_sample_cont
    {
        margin: 20px;
        padding: 20px;
    }
    .jsbank_sample_tit
    {
        font-weight: bold;
        margin-bottom: 10px;
        padding: 5px;
        width: auto;
        background-color: #c0c0c0;
        border: 5px solid #a0a0a0;
        color: black;
        text-align: center;
    }
    #layer1
    {
        position: absolute;
        visibility: hidden;
        width: 200px;
        height: 200px;
        left: 20px;
        top: 30%;
        background-color: White;
        border: 1px solid #000;
        padding: 10px;
        margin-left: 260px;
        margin-top: -66px;
        font-size: 17px;
        color: Green;
    }
    #close
    {
        float: right;
    }
    .ddlist
    {
        height: 30px;
        width: 180px;
    }
    .tdw
    {
        width: 300px;
    }
    div.calendar
    {
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
    }
    div.calendar table
    {
        width: 100%;
    }
    div.dateField
    {
        width: 140px;
        padding: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        color: #555;
        background-color: white;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    div#popupDateField:hover
    {
        background-color: #cde;
        cursor: pointer;
    }
    .style1
    {
        width: 100%;
        height: auto;
    }
    .style2
    {
        height: auto;
        width: 25%;
    }
    .divSale
    {
        width: 100%;
    }
    .divHeader
    {
        color: #FFFFFF;
        font-weight: bold;
    }
    .style10
    {
        width: 63px;
    }
    .style12
    {
        width: 78px;
    }
    .style13
    {
        width: 117px;
    }
    .style15
    {
        width: 75px;
        text-align: left;
    }
    .style19
    {
        width: 135px;
    }
    .style21
    {
        width: 140px;
    }
    .style26
    {
        width: 111px;
    }
    .style28
    {
        width: 86px;
    }
    .style29
    {
        width: 133px;
    }
    .style31
    {
        width: 115px;
    }
    .style32
    {
        width: 68px;
    }
</style>

<script type="text/javascript">

//-------------------------------EndHieu------------------------------------------------------------------------------------------------------------------------------------------


    x = 550;
    y = 550;
    function setVisible(obj) {
        obj = document.getElementById(obj);
        obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';
    }
    function placeIt(obj) {
        obj = document.getElementById(obj);
        if (document.documentElement) {
            theLeft = document.documentElement.scrollLeft;
            theTop = document.documentElement.scrollTop;
        }
        else if (document.body) {
            theLeft = document.body.scrollLeft;
            theTop = document.body.scrollTop;
        }
        theLeft += x;
        theTop += y;
        obj.style.left = theLeft + 'px';
        obj.style.top = theTop + 'px';
        setTimeout("placeIt('layer1')", 500);
    }


    function hidediv() {
        if (document.getElementById) { // DOM3 = IE5, NS6 
            document.getElementById('hideshow').style.visibility = 'hidden';
        }
        else {
            if (document.layers) { // Netscape 4 
                document.hideshow.visibility = 'hidden';
            }
            else { // IE 4 
                document.all.hideshow.style.visibility = 'hidden';
            }
        }
    }

    function showdiv()
    {
        if (document.getElementById) { // DOM3 = IE5, NS6 
            document.getElementById('hideshow').style.visibility = 'visible';

        }
        else
        {
            if (document.layers) { // Netscape 4 
                document.hideshow.visibility = 'visible';
            }
            else
            { // IE 4 
                document.all.hideshow.style.visibility = 'visible';
            }
        }      
         return false;
        
    }    

    

    function clearDropDownList(sel1) {
        len1 = sel1.options.length;
        for (i = len1; i >= 0; i--) {
            sel1.options[i] = null;
        }
    }
    //
    //ajax functions
    //
    function timeChange(timeID, item) {
        var date = document.getElementById(timeID);
        var hour = item.options[item.selectedIndex].value;
        Ajax_Control_Appointment_app.loadEmployeeSpa(date.value, hour, timeChange_callback);
        return false;
    }
    function timeChange_callback(res) {

        if (res.error == null) {
            var ds = res.value;
            if (ds != null && typeof (ds) == "object" && ds.Tables != null) {
                if (ds.Tables.Count > 0) {
                    //load employee
                    var statesList = document.getElementById('ddlEmp');
                    var tblEmp = ds.Tables[0];
                    clearDropDownList(statesList);
                    for (var i = 0; i < tblEmp.Rows.length; i++) {
                        statesList.options[statesList.options.length] = new Option(tblEmp.Rows[i].FULLNAME, tblEmp.Rows[i].EMP_ID);
                    }
                }
                if (ds.Tables.Count > 1) {
                    //load spa
                    var spaList = document.getElementById('ddlSpa');
                    var tblSpa = ds.Tables[1];
                    clearDropDownList(spaList);
                    for (var i = 0; i < tblSpa.Rows.length; i++) {
                        spaList.options[spaList.options.length] = new Option(tblSpa.Rows[i].SPA_NAME, tblSpa.Rows[i].SPA_ID);
                    }
                }
            }
        } else {
            alert('error:' + res.error.value);
        }
    }

    function changeSerType(item) {
        var type = item.options[item.selectedIndex].value;
        if (type == '0') {
            var statesList = document.getElementById('ddlSer');
            clearDropDownList(statesList);
        }
        else {
            Ajax_Control_Appointment_app.loadServiceBySerTypeId(type, changeSerType_callback);
        }

        return false;
    }
    function changeSerType_callback(res) {
        if (res.error == null) {
            var ds = res.value;
            if (ds != null && typeof (ds) == "object" && ds.Rows != null) {
                //load employee
                var statesList = document.getElementById('ddlSer');
                clearDropDownList(statesList);
                for (var i = 0; i < ds.Rows.length; i++) {
                    statesList.options[statesList.options.length] = new Option(ds.Rows[i].SER_NAME, ds.Rows[i].SER_ID);
                }
            }
        } else {
            alert('error:' + res.error.value);
        }
    }

    function addNewClient() {
        var cliname = document.getElementById('txtName').value;
        var cliemail = document.getElementById('txtEmail').value;
        var cliphone = document.getElementById('txtPhone').value;

        if (cliname.trim() == '') {
            //show message
        } else if (cliphone.trim() == '') {
            //show message
        } else {
            Ajax_Control_Appointment_app.addNewClient(cliname, cliemail, cliphone, addNewClient_callback);
        }
    }
    function addNewClient_callback(res) {
        if (res.error == null) {
            var newcli = res.value;
            var client = document.getElementById('ctl00_ContentPlaceHolder1_app1_ddlClient');
            client.options[client.options.length] = new Option(newcli[1], newcli[0]);
            client.selectedIndex = client.options.length - 1;
            setVisible('layer1');
            //clear value
            document.getElementById('txtName').value = ''; 
            document.getElementById('txtEmail').value = '';
            document.getElementById('txtPhone').value = '';
        }
    }

    function addAppointment() {
        var clientId, empId, spaId, serId, date, time;

        var client = document.getElementById('ctl00_ContentPlaceHolder1_app1_ddlClient');
        var emp = document.getElementById('ddlEmp');
        var spa = document.getElementById('ddlSpa');
        var ser = document.getElementById('ddlSer');
        var lstTime = document.getElementById('ctl00_ContentPlaceHolder1_app1_lstTime');
        if (client.selectedIndex > -1)
            clientId = client.options[client.selectedIndex].value;
        else {
            //show message
            return;
        }
        if (emp.selectedIndex > -1)
            empId = emp.options[emp.selectedIndex].value;
        else {
            //show message
            return;
        }
        if (spa.selectedIndex > -1)
            spaId = spa.options[spa.selectedIndex].value;
        else {
            //show message
            return;
        }
        if (ser.selectedIndex > -1)
            serId = ser.options[ser.selectedIndex].value;
        else {
            //show message
            return;
        }
        if (lstTime.selectedIndex > -1)
            time = lstTime.options[lstTime.selectedIndex].value;
        else {
            //show message
            return;
        }
        date = document.getElementById('ctl00_ContentPlaceHolder1_app1_txtDate').value;
        Ajax_Control_Appointment_app.addAppointment(clientId, empId, spaId, serId, date, time, addAppointment_callback);

    }
    function addAppointment_callback(res) {
        if (res.error == null) {
            var result = res.value;
            if (result == 1) {
                timeChange('ctl00_ContentPlaceHolder1_app1_txtDate', document.getElementById('ctl00_ContentPlaceHolder1_app1_lstTime'));
                alert('Add new appoiments successfully');
            } else {
                alert('Select date greater than current date !!!');
            }
        }
    }

    function setupCalendars() {
        // Embedded Calendar
        Calendar.setup(
          {
              dateField: 'embeddedDateField',
              parentElement: 'embeddedCalendar'
          }
        )
    }

    Event.observe(window, 'load', function() { setupCalendars() });

    function showPopupAppoinment(selectDate)
     {      
            window.location.href="Appointments_Add.aspx?date="+selectDate;
    }       
    
</script>

<div id="content">
    <br />
    <div id="embeddedExample" style="">
        <div id="embeddedCalendar" style="margin-left: auto; margin-right: auto">
        </div>
        <br />
        <input id="embeddedDateField" style="visibility: collapse" type="text" />
    </div>
    <p>
    </p>
    <div>
        <div style="width: 100%; height: 600px; overflow: scroll; background-color: gray">
            <table border="1" width="100%" cellspacing="0" bgcolor="#F7F6F3">
                <tr>
                    <asp:GridView ID="grvShowApp" runat="server" AutoGenerateColumns="False" Style="width: 750px;
                        height: 500px" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px"
                        DataMember="APP_ID" CellPadding="2" OnRowDataBound="grvShowApp_RowDataBound1">
                        <RowStyle ForeColor="#000066" />
                        <Columns>
                            <asp:TemplateField HeaderText="Status" ItemStyle-Width="80px">
                                <ItemTemplate>
                                    <asp:Label ID="lblStatus" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"APP_STATUS") %>'
                                        Style="width: 80px"></asp:Label>
                                </ItemTemplate>
                                <ItemStyle Width="80px"></ItemStyle>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Client Name" ItemStyle-Width="190px">
                                <ItemTemplate>
                                    <asp:Label ID="lblCli_Name" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"CLI_NAME") %>'
                                        Style="width: 80px"></asp:Label>
                                </ItemTemplate>
                                <ItemStyle Width="190px"></ItemStyle>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="EMPLOYEES" ItemStyle-Width="190px">
                                <ItemTemplate>
                                    <asp:Label ID="lblEMPLOYEES" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"EMPLOYEES") %>'
                                        Style="width: 80px"></asp:Label>
                                    <%--  <div id="lblPrice">
                            </div>--%>
                                </ItemTemplate>
                                <ItemStyle Width="190px"></ItemStyle>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="TIME" ItemStyle-Width="66px">
                                <ItemTemplate>
                                    <asp:Label ID="lblTIME" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"TIME") %>'
                                        Style="width: 80px"></asp:Label>
                                    <%-- <input type="text" id="txtQuantity" style="width: 67px" onchange="QuantityChange(this)" />--%>
                                </ItemTemplate>
                                <ItemStyle Width="66px"></ItemStyle>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="CheckOut" ItemStyle-Width="65px">
                                <ItemTemplate>
                                    <asp:HiddenField ID="hdfCheckOut" runat="server" Value='<%# DataBinder.Eval(Container.DataItem,"APP_ID") %>' />
                                    <asp:ImageButton ID="btnCheckOut" ImageUrl="~/images/checkout_btn.png" PostBackUrl='<%# Eval("APP_ID", "../../Appointment_popup.aspx?APP_ID={0}") %>'
                                        runat="server" />
                                </ItemTemplate>
                                <ItemStyle Width="65px"></ItemStyle>
                            </asp:TemplateField>
                        </Columns>
                        <FooterStyle BackColor="White" ForeColor="#000066" />
                        <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
                        <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
                        <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
                    </asp:GridView>
                </tr>
            </table>
        </div>
    </div>
</div>
